<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link href="../css/mui.picker.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../fonts/iconfont.css" />
		<link rel="stylesheet" href="../css/1px.css" />
		<title>退货</title>
		<style>
			html {
				font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
			}
			
			body {
				overflow-x: hidden;
				background-color: #fff !important;
			}
			
			.mui-content {
				font-size: 13px;
				background-color: #fff;
			}
			
			.flex {
				display: flex;
			}
			
			.flex-item {
				flex: 1;
			}
			
			.refund-id {
				padding: 5px 0;
			}
			
			.refund-id span {
				margin-left: 5px;
			}
			/**/
			
			.purchase-link {
				float: right;
				margin-right: 10px;
			}
			/*列表*/
			.title-box {
				background-color: #F8F8F8;
				height: 30px;
				line-height: 30px;
			}
			
			.img-box-title {
				flex: 2;
				text-align: center;
			}
			
			.number-title {
				flex: 4;
				text-align: center;
			}
			
			.op-title {
				flex: 3;
				text-align: center;
			}
			.goods-list {
				list-style: none;
			}
			
			.goods-each {
				padding: 8px 5px 5px;
				position: relative;
			}
			 .bgGray{
      	background-color: #F8F8F8;
      }
			.img-box {
				flex: 2;
				position: relative;
			}
			
			.img-box img {
				height: 70px;
				width: 70px;
				vertical-align: middle;
				text-align: center;
			}
			
			.img-box .id {
				position: absolute;
				bottom: 1px;
				width: 100%;
				background-color: rgba(52, 52, 52, .5);
				color: #FFFFFF;
				text-align: center;
				font-size: 13px;
			}
			
			.goods-info-box {
				flex: 4;
				font-size: 14px;
				line-height: 24px;
			}
			
			.goods-info-box div {
				margin-left: 5px;
			}
			
			.goods-op-box {
				flex: 3;
				position: relative;
				height: 100%;
			}
			
			.withdraw-num {
				margin-left: 20px;
			}
			/**/
			
			.bottom-change-box {
				padding: 2px;
				position: relative;
			}
			
			.bottom-change-box:before {
				content: '';
				height: 1px;
				position: absolute;
				right: 0;
				bottom: 28px;
				width: 100%;
				transform: scaleY(.5);
				background-color: #CCCCCC;
			}
			
			.bottom-change-box .choose-btn {
				width: 60px;
				height: 24px;
				line-height: 12px;
				float: right;
				background-color: #FF9800;
				border-color: #FF9800
			}
			
			.bottom-change-box .choose-icon {
				display: inline-block;
				float: right;
				width: 24px;
				margin-right: 20px;
				color: #C0BFC4;
			}
			/*滚动区*/
			
			.mui-scroll-wrapper {
				top: 32px;
				bottom: 39px;
			}
			/*底部*/
			
			footer {
				height: 38px;
				line-height: 38px;
				background-color: #fff;
				position: absolute;
				bottom: 0;
				width: 100%;
				text-align: center;
				font-size: 15px
			}
			
			footer:before {
				content: '';
				height: 1px;
				position: absolute;
				right: 0;
				bottom: 38px;
				width: 100%;
				transform: scaleY(.5);
				background-color: #acacb4;
			}
			
			.back-btn {
				background-color: #E6E6E6;
				color: #000;
				width: 90%;
				margin: auto auto;
				vertical-align: middle;
			}
			
			.next-btn {
				background-color: #ff6800;
				color: #fff;
				width: 90%;
				margin: auto auto;
				vertical-align: middle;
			}
			/**/
			
			.mui-popover {
				height: 100px;
			}
			
			.mui-popover .mui-scroll-wrapper {
				top: 0;
				bottom: 0;
				padding: 10px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="refund-id vux-1px-b">
				&emsp;退货单号：<span></span>
			</div>
			<!---->
			<!---->
			<div id="refreshContainer" class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="goods-list mui-table-view mui-table-view-chevron">

					</ul>
					<!---->
					<script id="withdrawLi" type="text/html">
						<div class="flex title-box">
								<div class="img-box-title">礼品</div>
								<div class="number-title">库存</div>
								<div class="op-title">操作</div>
						</div>
						<% for(var i=0; i<list.length; i++) {%>
							<%if(i%2===0){%>
							<li class="goods-each mui-clearfix">
								<%}else {%>
								<li class="goods-each bgGray mui-clearfix">
									<%}%>
							<div class="flex mui-clearfix">
								<div class="img-box">
									<a href="#middlePopover" class="img-info" index="<%=i%>"><img src="<%=imgPath+list[i].cutImg%>" alt="" /></a>
									<div class="id">
										<%=list[i].goodsId%>
									</div>
								</div>
								<div class="goods-info-box">
									<div class="goods-name">
										<%=list[i].goodsName%>
									</div>
									<div class="goods-id">门店库存：
										<%=list[i].shopGoodsAmount%>
									</div>
									<div class="goods-num">
										申请退货数：
										<%=list[i].refundAmount%>
									</div>
								</div>
								<div class="goods-op-box">
								</div>
							</div>
							<div class="bottom-change-box mui-clearfix">
								<div type="button" class="sure-choose-btn mui-btn mui-btn-primary choose-btn " index="<%= i %>" data-id="<%=list[i].goodsId%>">调整</div>
								<i class="iconfont icon-delete choose-icon delete-icon" data-id='<%=list[i].goodsId%>' index='<%= i %>'></i>
							</div>
						</li>
						<%}%>
					</script>
					<!---->
				</div>
			</div>
		</div>
		<!--底部-->
		<footer class="flex btn-box">
			<div class="flex-item ">
				<div class="mui-btn back-btn mui-action-back">上一步</div>
			</div>
			<div class="flex-item">
				<div class="mui-btn next-btn">提交申请</div>
			</div>
		</footer>
		<!---->
		<!--显示附加信息-->
		<div id="middlePopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<p class="fullName">规格：<span></span></p>
					<p class="tags">用途：<span></span></p>
					<p class="score">积分：<span></span></p>
				</div>
			</div>
		</div>
		<!---->
	</body>
	<script src="../config.js"></script>
	<script src="../js/template-native.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.min.js"></script>
	<script src="../js/mui.picker.js"></script>
	<script src="../js/mui.poppicker.js"></script>
	<script>
		(function($, doc) {
			var currentShopObj,
				pageList = [],
				refundGoods = {
					refund: {
						storeId: '',
						storeName: '',
						refundRecivedStatus: 1,
						message: ''
					},
					goodsList: []
				},
				refundId = ''
			$.init({
				beforeback: function() {
					//获得列表界面的webview
					var withdraw1 = plus.webview.getWebviewById('withdraw')
					$.fire(withdraw1, 'changeList', {
						goodsList: refundGoods.goodsList,
						refundId: refundGoods.refund.refundId
					});
					//返回true，继续页面关闭逻辑
					return true;
				},
				//				pullRefresh: {
				//					container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
				//					up: {
				//						height:100,
				//						auto:true,
				//						contentrefresh: '正在加载...',
				//						contentnomore:'没有更多数据了',
				//						callback: pullupRefresh
				//					}
				//				}
			})
			$.plusReady(function() {
				receiveParam()
			})
			$.ready(function() {
				bindEvent()
			})
			//滚动
			$('.mui-scroll-wrapper').scroll({
				scrollY: true,
				bounce: true,
				deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006，
			});

			function pullupRefresh() {
				mui('.mui-scroll-wrapper').scroll().reLayout();
				var that = this
				setTimeout(function() {
					that.endPullupToRefresh(true);
				}, 2000)
			}

			function receiveParam() {
				var self = plus.webview.currentWebview();
				currentShopObj = self.currentShopObj;
				refundId = self.refundId
				refundGoods.refund.refundId = self.refundId
				refundGoods.refund.storeId = self.currentShopObj.storeId
				refundGoods.refund.storeName = self.currentShopObj.storeName
				pageList = self.refundGoodsList
				refundGoods.goodsList = self.refundGoodsList
				tags = self.tags
				types = self.types
				document.querySelector(".refund-id>span").innerText = refundId
				setTimeout(function() {
					setPage()
				}, 0)
			}

			function bindEvent() {
				//调整
				$('.goods-list').on('tap', '.sure-choose-btn', function(e) {
					var goodsId = this.getAttribute('data-id')
					var index = this.getAttribute('index')
					var btnArray = ['取消', '确定'];
					mui.prompt('请输入退货数量', pageList[index].refundAmount ? pageList[index].refundAmount : 0, '', btnArray, function(e) {
						if(e.index == 1) {
							if(e.value) {
								pageList[index].refundAmount = e.value * 1
								var goodsBox = doc.getElementsByClassName("goods-op-box")
								document.getElementsByClassName("withdraw-num")[index].innerText = '退货数：' + e.value
								refundGoods.goodsList[index].refundAmount = pageList[index].refundAmount = e.value
							} else {}
						} else {}
					}, 'div')
					document.querySelector('.mui-popup-input input').type = 'number'
				})
				//删除
				$('.goods-list').on('tap', '.delete-icon', function() {
					var goodsId1 = this.getAttribute('data-id')
					var index1 = this.getAttribute('index')
					var goodsBox = doc.getElementsByClassName("goods-op-box")
					var btnArray = ['否', '是'];
					mui.confirm('删除货品', '', btnArray, function(e) {
						if(e.index == 1) {
							refundGoods.goodsList.splice(index1, 1)
							setPage()
						} else {}
					})
				})
				//显示用途
				$('.goods-list').on('tap', '.img-info', function(e) {
					var ind = this.getAttribute('index')
					if(refundGoods.goodsList[ind].type) {
						var typeFullName = refundGoods.goodsList[ind].type
					} else {
						var typeFullName = refundGoods.goodsList[ind].typeFullName
					}
					var tags = ''
					refundGoods.goodsList[ind].tags.forEach(function(item) {
						tags += item.tagDescribe + ' '
					})
					document.querySelector(".fullName span").innerText = typeFullName
					document.querySelector(".tags span").innerText = tags
					document.querySelector(".score span").innerText = refundGoods.goodsList[ind].score
				})
				//		下一步
				$('.btn-box').on('tap', '.next-btn', function() {
					if(refundGoods.goodsList.length > 0) {
						config.ajax({
							type: "post",
							url: config.basePath + "/refund/writeDraft",
							async: true,
							data: refundGoods,
							headers: {
								'Content-Type': 'application/json'
							},
							success: function(res) {
								if(res.result === 1) {
									//刷新页面
									var withdrawList = plus.webview.getWebviewById('withdrawList')
									if(withdrawList) {
										$.fire(withdrawList, 'changeList', '');
									}
									//
									var titleText = currentShopObj.storeName + '-退货'
									if(!refundId) {
										refundId = res.refundId
									}
									$.openWindow({
										url: 'withdrawList.html',
										id: 'withdrawList',
										styles: {
											top: 0, //新页面顶部位置
											bottom: 0, //新页面底部位置
											titleNView: {
												titleText: titleText,
												titleColor: "#FFFFFF",
												titleSize: "17px",
												backgroundColor: "#FF6800",
												autoBackButton: true,
												buttons: [{
													float: "right",
													fontSize: "18px",
													fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
													text: "\ue602",
													onclick: function() {
														var allPage = plus.webview.all()
														var nowPage = plus.webview.getWebviewById('index')
														for(var i = 0; i < allPage.length; i++) {
															if(allPage[i].getURL() !== nowPage.getURL()) {
																plus.webview.close(allPage[i]);
															}
														}
													}
												}],
												splitLine: {
													color: "#CCCCCC",
													height: "1px"
												}
											}
										},
										extras: {
											currentShopObj: currentShopObj,
											type: 2
										},
									})
								}
							}
						});
					} else {
						$.toast('请选择货品');
					}
				})
			}
			//页面
			function setPage() {
				var html = template('withdrawLi', {
					list: pageList,
					imgPath: config.imgPath
				})
				$('.goods-list')[0].innerHTML = html
			}
		}(mui, document))
	</script>

</html>